import React, { useState, useMemo, useEffect } from 'react';
import { ColView, filter_list, useHigh, GridTable, filter_row, useCmd, WaitUmd, MainView, obj_str, BtTxt, PanelFind,
    uJob, cline, no_del, Btn, is_empty, loc } from 'sui';
import { fix_col, load_col } from 'warehouse/base/cmd';
import { get_col, load_custom } from './task/cmd';
import { load_supply } from 'stock/base/cmd';
import { useAccess, User } from 'cache';

const PickView = () => {
    const [map_supply, mapSupply] = useState();
    const [map_custom, mapCustom] = useState();
    const [col, setCol] = useState();
    const [high] = useHigh(140, 100);
    const [no_acc] = useAccess();
    const umd = useCmd("file/list/oilpick");

    useEffect(() => {
        load_col("oilpara", setCol);
        load_custom(null, mapCustom);
        load_supply("oil", null, mapSupply);
    }, []);

    const getRow = useMemo(() => {
        const lst = filter_list(["sn"], col);
        return filter_row(umd.value, lst, umd.filter);
    }, [umd.value, umd.filter, col]);

    const pact = {
        "del": v => {
            if (no_del()) {
                return;
            }

            umd.update("file/rm/oilpick", {"sn": obj_str(v, "sn")});
        },
        "fin": v => {
            if (no_del(loc("l_121"))) {
                return;
            }

            uJob(null, "stock/fin",
                {
                    line: cline(),
                    sn: obj_str(v, "sn"),
                    tp: "oil",
                    uname: User.uName(),
                },
                r => umd.reload(umd.endWait), e => umd.setErr());
        }
    };

    if (umd.isFin("col")) {
        const list = [
            {sn: "oilpara", name: loc("l_723"), fix: fix_col()},
        ];

        const hreturn = () => {
            load_col("oilpara", setCol);
            umd.hreturn();
        };

        return <ColView hreturn={hreturn} title={loc("l_723")} subtitle={loc("l_221")} list={list} cur="oilpara"/>;
    }

    const getCol = () => {
        if (is_empty(col)) {
            return null;
        }

        const tmp = [
            {name: loc("l_193"), key: 'index', width: 70, frozen: true},
            {name: loc("l_238"), key: 'e_opt', width: 160, export: false, formatter: props => {
                const d = props.row;
                return (
                    <div className="inline-flex">
                        <BtTxt hcmd={() => umd.pact(pact, d, "del")} disabled={no_acc("ub")}>{loc("l_237")}</BtTxt>
                        <BtTxt hcmd={() => umd.pact(pact, d, "fin")} disabled={no_acc("ub")}>{loc("l_120")}</BtTxt>
                    </div>
                );
            }},
        ];

        get_col(tmp, col, map_supply, map_custom);

        return tmp;
    };

    const Right = () => (
        <div className="inline-flex">
            <Btn className="mr-4" hcmd={() => umd.pact(null, null, "col")} disabled={no_acc("ub")}>{loc("l_221")}</Btn>
        </div>
    );

    return (
        <MainView>
            <PanelFind left={loc("l_723")} right={<Right/>} hcmd={v => umd.setFilter(v)}/>
            <GridTable col={getCol()} row={getRow} high={high}/>
            <WaitUmd umd={umd}/>
        </MainView>
    );
};

export {PickView};
